<#include "/basicdata/common/scripts.html">
<body>
<style>
    .ztree * {
        margin: 1px;
        font-size: 13px!important;
        font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
    }

    .ztree li {
        margin-top: 1px;
    }
</style>
<div class="fh-model" style="height:300px!important; min-height: 0px;">
    <form class="form-inline" id="searchForm">
        <div class="fh-subtitle">
            <input type="text" id="postName" class="input-sm form-control col-sm-5-8" name="postName" value="" placeholder="请输入岗位" autocomplete="off"/>
            <span id="expandTrigger" class="btn btn-xs glyphicon glyphicon-collapse-down btn-deeporange" data-flag="0" onclick="triggerExpand(this)">展开</span>
        </div>
        <div style="background-color: #FAFAFA;">
            <div id="materialTree" class="ztree" style="height: 80%;overflow: auto;">
            </div>
        </div>

    </form>
</div>
<div class="div-model-btn">
    <div class="model-btn" onclick="submit()">确定</div>
</div>
</body>
<script>
    var obj = '${trees}';
    var zNodes = JSON.parse(obj);
    var zTree;
    $(function() {
        $.fn.zTree.init($("#materialTree"), setting, zNodes);
        fuzzySearch('materialTree','#postName',false,true);
        zTree = $.fn.zTree.getZTreeObj("materialTree");
    })

    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"//level,all
        },
        view: {
            selectedMulti: false, //是否允许多选
            showIcon: true,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: true,//设置 zTree 是否显示节点之间的连线。默认值：true
            fontCss : {color:"#333"}
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            //zTree节点的点击事件
            onClick: function (e, treeId, treeNode, clickFlag) {
                zTree.checkNode(treeNode, !treeNode.checked, true);
            }
        }
    };
    function submit() {
        debugger;
        var zTreeObj = $.fn.zTree.getZTreeObj("materialTree");
        //获取复选框/单选框选中的节点
        var checkedNodes = zTreeObj.getCheckedNodes(true);
        const postCode = checkedNodes.map(item=>item.value);
        const id = checkedNodes.map(item=>item.id);
        const postName = checkedNodes.map(item=>item.name);
        if("0" == id){
            return sys.topmsg("请选择岗位");
        }
        var rows = [];
        var obj = {};
        obj['postCode'] = postCode;
        obj['id'] = id;
        obj['postName'] = postName;
        rows.push(obj);
        parent.addSubUserPostGroup(rows);
        sys.frameDialogClose();

    }

    function triggerExpand(obj) {
        var $this = $(obj);
        var zTreeObj = $.fn.zTree.getZTreeObj("materialTree");
        if($this.data("flag")=="0"){
            zTreeObj.expandAll(true);
            $this.data("flag","1");
            $this.html("折叠");
            $this.removeClass("glyphicon-collapse-down");
            $this.addClass("glyphicon-collapse-up");
        }else{
            zTreeObj.expandAll(false);
            $this.data("flag","0");
            $this.html("展开");
            $this.removeClass("glyphicon-collapse-up");
            $this.addClass("glyphicon-collapse-down");
        }

    }
</script>